<template>
  <div class="app-container xiapli-list-good">
    <!-- 添加或修改品牌对话框 -->
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="基础信息" name="first">
        <el-form
          ref="form"
          :model="form"
          :rules="rules"
          label-width="160px"
          :disabled="disabled"
          style="width:978px"
        >
          <el-divider content-position="center">商品信息</el-divider>
          <el-form-item label="名称" prop="name">
            <el-input v-model="form.name" placeholder="请输入名称" />
          </el-form-item>
          <el-form-item label="分类" prop="categoryTwoId">
            <el-cascader
              v-if="isEdit ? show:true"
              v-model="category"
              :show-all-levels="false"
              :props="props"
              @change="categoryChange"
            ></el-cascader>
          </el-form-item>
          <el-form-item label="价格" prop="price">
            <el-input-number :min="0" v-model="form.price" placeholder="请输入价格" />
          </el-form-item>
          <el-form-item label="最小价格" prop="priceMin">
            <el-input-number :min="0" v-model="form.priceMin" placeholder="请输入最小价格" />
          </el-form-item>
          <el-form-item label="最大价格" prop="priceMax">
            <el-input-number :min="0" v-model="form.priceMax" placeholder="请输入最大价格" />
          </el-form-item>
          <el-form-item label="总库存" prop v-if="form.num">
            <!-- <el-input-number
              :disabled="!!(skus && skus.length)"
              :step-strictly="true"
              :min="0"
              v-model="form.num"
              placeholder="请输入总库存"
            />-->
            <el-input v-model="form.num" placeholder="请输入名称" style="width:200px;" />
          </el-form-item>
          <el-form-item label="图片" prop="image">
            <template v-if="disabled">
              <oss-image-preview v-if="form.image" :src="form.image" :width="146" :height="146" />
            </template>
            <image-upload
              v-else
              v-model="form.image"
              :limit="1"
              :model="$yun.FileEnum.PRODUCT_GOODS_IMG"
            />
          </el-form-item>
          <el-form-item label="图片列表" prop="images">
            <div v-if="disabled">
              <oss-image-preview
                style="margin-right: 10px;display: inline-block"
                v-for="(img,index) in ($yun.stringIsNotEmpty(form.images) ? form.images.split(','):[])"
                :key="`img-${index}`"
                :src="img"
                :width="146"
                :height="146"
              />
            </div>
            <image-upload
              v-else
              v-model="form.images"
              :limit="10"
              :model="$yun.FileEnum.PRODUCT_GOODS_IMG"
            />
          </el-form-item>
          <el-form-item label="视频列表" prop="videoList">
            <transition-group
              class="upload-file-list el-upload-list el-upload-list--text good-view-video-list"
              v-if="disabled"
              name="el-fade-in-linear"
              tag="ul"
            >
              <li
                :key="`vedeo-${index}`"
                class="el-upload-list__item ele-upload-list__item-content"
                v-for="(file, index) in ($yun.stringIsNotEmpty(form.videoList) ? form.videoList.split(','):[])"
              >
                <el-link :href="$yun.getPreviewUrl(file.url)" :underline="false" target="_blank">
                  <span class="el-icon-document">{{ file.name }}</span>
                </el-link>
              </li>
            </transition-group>
            <file-upload v-else v-model="form.videoList" :limit="10" :fileType="['mp4']" />
          </el-form-item>
          <el-form-item label="简介" prop="intro">
            <el-input type="textarea" :rows="16" v-model="form.intro" placeholder="请输入简介" />
          </el-form-item>
          <!-- <el-form-item :label="$t('whether-to-online')" prop="isMarketable">
            <dict-select dict-type="boolean_value" v-model="form.isMarketable" type="radio" />
          </el-form-item>-->
          <el-form-item label="规格和规格属性" v-if="showSku">
            <div v-if="!disabled">
              <el-input
                class="input-new-tag"
                v-if="inputVisible"
                v-model="inputValue"
                ref="saveTagInput"
                size="small"
                @keyup.enter.native="handleInputConfirm"
                style="width:100px"
              ></el-input>
              <el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>
              <div v-for="(attr,index) in form.h2ProductSkuAttributeList" :key="index">
                <div class="skuClass">
                  <el-tag
                    style="margin-right:5px;"
                    @close="closeAttr(index)"
                    :closable="isShow"
                    v-model="attr.name"
                  >{{attr.name}}</el-tag>
                </div>
              </div>
            </div>
            <template v-if="disabled">
              <div
                v-for="(attr,index) in form.h2ProductSkuAttributeList"
                :key="index"
                :label="attr.name"
                prop
                label-width="160px"
                class="video-view-attr-wrapper"
              >
                <div class="attr-content">
                  <div>
                    <el-tag
                      style="margin-right: 10px"
                      v-for="(opt,index) in attr.options"
                      :key="index"
                      type="info"
                      effect="dark"
                      :closable="!disabled"
                      @close="closeOption(attr,index)"
                    >{{ opt.name }}</el-tag>
                  </div>
                </div>
              </div>
              <el-table
                v-if="form.h2ProductSkuAttributeList && form.h2ProductSkuAttributeList.length"
                :data="skus"
                class="detailTable"
              >
                <el-table-column
                  v-for="(attr,index) in form.h2ProductSkuAttributeList"
                  :key="attr.name"
                  align="center"
                  width="150"
                  :label="attr.name"
                  :show-overflow-tooltip="true"
                >
                  <template slot-scope="scope">
                    <!-- <span>{{ scope.row.names[index] ? scope.row.names[index].name : null }}</span>
                    <span>{{optionMap[(scope.row.skuAttribute[attr.id])]}}</span>-->
                    <span>{{optionMap[(scope.row.skuAttribute[attr.id])]}}</span>
                  </template>
                </el-table-column>
                <el-table-column label="商品名称" align="center" prop="name" width="150"></el-table-column>
                <el-table-column label="库存" align="center" prop="num" width="100"></el-table-column>
                <el-table-column label="价格" align="center" prop="price" width="100"></el-table-column>
                <el-table-column label="图片" align="center" prop="image">
                  <div class="sku-attr" slot-scope="scope">
                    <template v-if="disabled">
                      <oss-image-preview
                        v-if="scope.row.image"
                        :src="scope.row.image"
                        :width="80"
                        :height="80"
                      />
                    </template>
                    <image-upload v-else :is-show-tip="false" :limit="1" v-model="scope.row.image" />
                  </div>
                </el-table-column>
              </el-table>
            </template>
          </el-form-item>
          <el-form-item label prop v-if="!disabled" style="text-align: center">
            <el-button type="primary" @click="submitForm">确 定</el-button>
            <el-button @click="cancel">返 回</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="Sku列表" name="second" v-if="!showSku">
        <div style="margin:20px 0;">规格和规格属性</div>
        <!--      添加和编辑-->
        <template v-if="!disabled">
          <div class="video-view-attr-wrapper">
            <div class="input-btn-wrapper">
              <!-- <div v-if="showSku">
                <el-input
                  class="input-new-tag"
                  v-if="inputVisible"
                  v-model="inputValue"
                  ref="saveTagInput"
                  size="small"
                  style="width:100px"
                  @keyup.enter.native="handleInputConfirm"
                ></el-input>
                <el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>
              </div>-->
              <div v-for="(attr,index) in form.h2ProductSkuAttributeList" :key="index">
                <div class="skuClass">
                  <el-tag
                    style="margin-right:5px;"
                    @close="closeAttr(index)"
                    :closable="showSku"
                    v-model="attr.name"
                    type="success"
                  >{{attr.name}}</el-tag>
                  <template v-if="!showSku">
                    <div class="skuItem">
                      <el-tag
                        v-for="(sku,index2) in attr.options"
                        :key="index2"
                        v-if="sku.enable == 1"
                        @click="clickSkuAttr(sku,index,index2)"
                        style="margin-right:5px;"
                        @close="closeAttr1(attr,index,index2)"
                        :closable="true"
                        v-model="sku.name"
                      >{{sku.name}}</el-tag>
                      <el-input
                        class="input-new-tag"
                        v-show="inputVisible2&&currentIndex==index"
                        v-model="inputValue2"
                        ref="saveTagInput2"
                        size="small"
                        style="width:100px"
                        @keyup.enter.native="handleInputConfirm2(attr,index)"
                      ></el-input>
                      <!-- @keyup.enter.native="handleInputConfirm2(attr,index)" -->
                      <el-button
                        v-show="!inputVisible2"
                        class="button-new-tag"
                        size="small"
                        @click="showInput2(index)"
                      >+ New Tag</el-button>
                    </div>
                  </template>
                </div>
              </div>
              <el-table :data="skus" max-height="1000" v-show="!showSku" :key="renderTable">
                <el-table-column
                  v-for="(attr,index) in form.h2ProductSkuAttributeList"
                  :key="attr.name"
                  align="center"
                  width="100"
                  :label="attr.name"
                  :show-overflow-tooltip="true"
                >
                  <template slot-scope="scope">
                    <span>{{optionMap[(scope.row.skuAttribute[attr.id])]}}</span>
                  </template>
                </el-table-column>
                <el-table-column label="商品名称" align="center" prop="name" width="160">
                  <template slot-scope="scope">
                    <el-input
                      placeholder="商品名称"
                      :disabled="scope.row.disabled"
                      v-model="scope.row.name"
                    ></el-input>
                  </template>
                </el-table-column>
                <el-table-column label="库存" align="center" prop="num" width="160">
                  <template slot-scope="scope">
                    <el-input-number
                      size="mini"
                      :min="0"
                      placeholder="库存"
                      :disabled="scope.row.disabled"
                      :step-strictly="true"
                      v-model="scope.row.num"
                      :controls="false"
                    ></el-input-number>
                  </template>
                </el-table-column>
                <el-table-column label="价格" align="center" prop="price" width="160">
                  <template slot-scope="scope">
                    <el-input-number
                      size="mini"
                      :min="0"
                      placeholder="价格"
                      :disabled="scope.row.disabled"
                      v-model="scope.row.price"
                      :controls="false"
                    ></el-input-number>
                  </template>
                </el-table-column>
                <el-table-column label="图片" align="center" prop="image" width="150">
                  <div class="sku-attr" slot-scope="scope">
                    <oss-image-preview
                      v-if="disabled"
                      :src="scope.row.image"
                      :width="80"
                      :height="80"
                    />
                    <image-upload
                      v-else
                      :is-show-tip="false"
                      :limit="1"
                      :disabled="scope.row.disabled"
                      v-model="scope.row.image"
                      :model="$yun.FileEnum.PRODUCT_GOODS_IMG"
                    />
                    <el-button
                      type="text"
                      v-if="!scope.row.disabled"
                      @click="uploadImage(scope.row)"
                    >上传图片</el-button>
                  </div>
                </el-table-column>
                <el-table-column
                  label="操作"
                  align="center"
                  class-name="small-padding fixed-width"
                  width="160"
                >
                  <template slot-scope="scope">
                    <el-button
                      type="text"
                      v-if="scope.row.disabled"
                      @click="updateDisable(scope.$index)"
                    >修改</el-button>
                    <el-button
                      type="text"
                      @click="updataSkuCurrent(scope.row,scope.$index)"
                      v-else
                    >确定</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </template>

        <!--      详情展示-->
      </el-tab-pane>
    </el-tabs>
    <el-dialog title="提示" :visible.sync="open" width="30%">
      <el-form ref="formName" :model="formName" label-width="100px">
        <el-form-item label="规格属性名称">
          <el-input v-model="formName.name"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="open = false">取 消</el-button>
        <el-button type="primary" @click="editAttrs">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import DictSelect from "@/components/DictSelect/index.vue"
import { addAttr, addList, addOption, getList, editAttr, updateList, removeAttr, removeOption, updateSkuAttr, updateSkuDel, updateSkuUpd } from '@/api/good/xiapi-list'
import { deepClone, isNumberStr } from "@/utils"
import { getCategory } from "@/api/good/category"
import OssImagePreview from "@/components/ImagePreview/oss-image-preview.vue"
import { stringIsNotEmpty } from "@/utils/yun"
import InputTag from "@/components/InputTag/InputTag.vue"
import Vue from 'vue'

export default {
  components: { InputTag, OssImagePreview, DictSelect },
  data () {
    const validator = (rule, value, callback) => {
      if (this.form.priceMin > this.form.priceMax) {
        callback("最小价格不能超过最大价格")
      } else {
        this.$refs.form.clearValidate(['priceMin', 'priceMax'])
        callback()
      }
    }
    const id = this.$yun.v(this.$route.params, 'id')
    return {
      formName: {
        name: null,
      },
      open: false,
      renderTable: null,
      activeName: 'first',
      skuEditName: [],
      currentIndex: 0,
      inputVisible: false,
      inputValue: '',
      inputVisible2: false,
      inputValue2: '',
      disabled: this.$route.name == '/good/view/:id',
      id,
      isEdit: id != null && isNumberStr(id),
      category: null,
      show: false,
      props: {
        lazy: true,
        value: 'id',
        label: 'name',
        async lazyLoad (node, resolve) {
          const pid = node.root ? 0 : node.value
          const rsp = await getCategory(pid)
          const data = rsp.data.map(i => ({ ...i, leaf: i.level == 2 }))
          resolve(data)
        }
      },
      num: null,
      price: null,
      attr: '',
      option: '',
      form: {
        // isMarketable: '1',
        h2ProductSkuAttributeList: [],
        categoryTwoId: null,
        num: null
      },
      rules: {
        name: [
          { required: true, message: "请输入名称", trigger: "blur" }
        ],
        categoryTwoId: [
          { required: true, message: "请选择商品分类", trigger: "change" }
        ],
        price: [
          { required: true, message: "请输入价格", trigger: "blur" },

        ],
        num: [
          { required: true, message: "请输入库存", trigger: "blur" }
        ],
        priceMin: [
          {
            required: true, message: "请输入最小价格", trigger: "blur",
          },
          {
            validator
          },
        ],
        priceMax: [
          {
            required: true, message: "请输入最大价格", trigger: "blur",
          },
          {
            validator
          },

        ],
        image: [
          { required: true, message: "请上传图片", trigger: "change" }
        ],
      },
      h2ProductSkuList: null,
      optionList: [],
      skus: [],
      showSku: false,
      optionMap: {},
      currentIndex: null,
      currentIndex2: null,
      editShow: false,
      isShow: false
    }
  },
  created () {
    console.log(this.$route.name)
    this.fetchData()
    // 编辑
    if (this.$route.name == 'Edit/:id') {
      this.showSku = false
      this.disabled = false
      this.isShow = false
      // 详情
    } else if (this.$route.name == '/good/view/:id') {
      this.showSku = true
      this.disabled = true
      this.isShow = false
    } else if (this.$route.name == "Add") {
      // 新增
      this.disabled = false
      this.showSku = true
      this.isShow = true
    }
  },
  computed: {
    priceMin () {
      const skus = this.skus
      const obj = {}
      if (skus && skus.length) {
        obj.num = Math.min(...skus.map(i => i.price))
      } else {
        obj.num = this.form.price
      }
      if (obj.num == 0) {
        obj.num = this.form.price
      }
      return obj
    },
    priceMax () {
      const skus = this.skus
      const obj = {}
      if (skus && skus.length) {
        obj.num = Math.max(...skus.map(i => i.price))
      } else {
        obj.num = this.form.price
      }
      if (obj.num == 0) {
        obj.num = this.form.price
      }
      return obj
    },
  },

  watch: {

  },
  methods: {
    clickSkuAttr (name, index, index2) {
      this.formName.name = name.name
      this.open = true
      this.editAttrsId = name.id
      this.currentIndex = index
      this.currentIndex2 = index2
    },
    editAttrs () {
      let params = {
        id: this.editAttrsId,
        name: this.formName.name
      }
      editAttr(params).then(res => {
        this.optionMap[params.id] = params.name
        this.skus = this.h2ProductSkuList
        this.form.h2ProductSkuAttributeList[this.currentIndex].options[this.currentIndex2].name = this.formName.name
        this.open = false
      })
    },
    handleClick (tab, event) {
      //console.log(tab, event)
    },
    showInput () {
      this.inputVisible = true
      let that = this
      this.$nextTick(_ => {
        that.$refs.saveTagInput.$refs.input.focus()
      })
    },
    handleInputConfirm () {
      console.log(this.inputValue)
      let inputValue = this.inputValue
      if (!this.inputValue) {
        this.$message.error("属性不能为空！")
        this.inputVisible = false
        return false
      }
      if (this.inputValue) {
        this.form.h2ProductSkuAttributeList.push({ name: inputValue })
      }
      this.inputVisible = false
      this.inputValue = ''
    },
    showInput2 (index) {
      this.currentIndex = index
      this.inputVisible2 = true
      let that = this
      // this.$nextTick(_ => {
      //   that.$refs.saveTagInput2.$refs.input.focus()
      // })
    },

    handleInputConfirm2 (attr, index) {
      let inputValue2 = this.inputValue2
      if (!inputValue2) {
        this.$message.error("属性规格不能为空！")
        this.inputVisible2 = false
        return false
      }
      // if (inputValue2) {
      //   this.form.h2ProductSkuAttributeList[index].options.push({
      //     attrName: attr.name, name: inputValue2, enable: 1
      //   })
      // }
      console.log(this.form.h2ProductSkuAttributeList[index])
      this.inputVisible2 = false
      this.inputValue2 = ''
      let params = {
        spuId: attr.spuId,
        attrId: attr.id,
        optionsName: inputValue2
      }
      updateSkuAttr(params).then((res) => {
        let option = res.data.option
        if (inputValue2) {
          this.form.h2ProductSkuAttributeList[index].options.push(res.data.option)
        }
        this.optionMap[option.id] = option.name
        this.h2ProductSkuList = res.data.skus
        this.h2ProductSkuList = this.h2ProductSkuList.map(i => ({
          ...i,
          skuAttribute: i.skuAttribute ? JSON.parse(i.skuAttribute) : null,
        }))
        this.handleSku()

      })
    },
    stringIsNotEmpty,
    categoryChange (value) {
      if (value && value.length) {
        this.form.categoryTwoId = value[1]
        this.form.categoryOneId = value[0]
      }
    },
    fetchData () {
      if (this.isEdit) {
        getList(this.id).then(({ data: { h2ProductGoodsinfo, h2ProductSkuAttributeList, h2ProductSkuList } }) => {
          this.form = {
            ...h2ProductGoodsinfo,
            h2ProductSkuAttributeList
          }
          this.h2ProductSkuList = h2ProductSkuList.map(i => ({
            ...i,
            skuAttribute: i.skuAttribute ? JSON.parse(i.skuAttribute) : null,
          }))
          this.category = [h2ProductGoodsinfo.categoryOneId, h2ProductGoodsinfo.categoryTwoId]
          this.show = true
          this.handleAttr()
          this.handleSku()
          console.log(this.h2ProductSkuList)
        })
      }
    },
    submitForm () {
      this.$refs["form"].validate(valid => {
        if (valid) {
          const form = deepClone(this.form)
          delete form['h2ProductSkuAttributeList']
          delete form['videoList']
          const data = {
            h2ProductSkuAttributeList: this.form.h2ProductSkuAttributeList,
            h2ProductGoodsinfo: form
          }
          if (this.skus.some(i => i.price >= this.form.priceMax)) {
            return this.$modal.msgError("SKU价格不能超过最大价格")
          }
          if (this.skus.some(i => i.price < this.form.priceMin)) {
            return this.$modal.msgError("SKU价格不能小于最小价格")
          }
          if (this.form.price > this.form.priceMax) {
            return this.$modal.msgError("商品价格不能超过最大价格")
          }
          if (this.form.price < this.form.priceMin) {
            return this.$modal.msgError("商品价格不能小于最小价格")
          }
          if (this.form.id != null) {
            let data = {
              h2ProductGoodsinfo: form
            }
            updateList(data).then(response => {
              this.$modal.msgSuccess("修改成功")
              // this.$tab.closePage();
              this.$router.push({ name: 'Xiapi-list' })
            })
            // this.$router('xiapi-list')
          } else {
            console.log(data.h2ProductSkuAttributeList)
            if (!this.form.h2ProductSkuAttributeList.length) {
              return this.$modal.msgError(`请输入至少一个规格！`)
            } else {
              addList(data).then(response => {
                this.$modal.msgSuccess("新增成功")
                this.form.id = response.data
                this.id = response.data
                this.$router.push({ name: 'Xiapi-list' })
              })
            }
          }
        }
      })
    },
    cancel () {
      this.$tab.closePage()
    },
    //添加规格属性
    addAttr () {
      if (!this.$yun.stringIsNotEmpty(this.attr)) {
        this.$alert('规格不能为空')
        return
      }
      // const attr = this.attr.trim()
      const h2ProductSkuAttributeList = this.form.h2ProductSkuAttributeList
      if (h2ProductSkuAttributeList.some(i => i.name == attr)) {
        this.$alert('已存在此规格')
        return
      }
      addAttr({ name: attr, spuId: this.id }).then(rsp => {
        h2ProductSkuAttributeList.push(rsp.data)
        this.attr = ''
      })
    },
    closeAttr (index) {
      const attr = this.form.h2ProductSkuAttributeList[index]
      this.$modal.confirm(`是否确认删除规格【${attr.name}】`).then(async () => {
        this.form.h2ProductSkuAttributeList.splice(index, 1)
        //console.log(this.form.h2ProductSkuAttributeList)
      }).catch(() => {
      })
    },
    closeAttr1 (attrs, index, index2) {
      console.log(attrs)
      const attr = this.form.h2ProductSkuAttributeList[index].options[index2]
      this.$modal.confirm(`是否确认删除规格属性【${attr.name}】`).then(async () => {
        let params = {
          spuId: attrs.spuId,
          optionId: attrs.options[index2].id
        }
        console.log(params)
        updateSkuDel(params).then((res) => {
          this.form.h2ProductSkuAttributeList[index].options.splice(index2, 1)
          this.h2ProductSkuList = res.data
          this.h2ProductSkuList = this.h2ProductSkuList.map(i => ({
            ...i,
            skuAttribute: i.skuAttribute ? JSON.parse(i.skuAttribute) : null,
          }))
          this.handleSku()
        })
      }).catch(() => {
      })
    },
    closeOption (attr, index) {
      const option = attr.options[index]
      this.$modal.confirm(`是否确认删除规格属性【${option.name}】`).then(async () => {
        await removeOption(option.id)
        //保存已有的sku数据
        this.h2ProductSkuList = this.skus
        attr.options.splice(index, 1)
        this.form.h2ProductSkuAttributeList = [...this.form.h2ProductSkuAttributeList]
      }).catch(() => {
      })
    },
    handleAttr () {
      let attrs = this.form.h2ProductSkuAttributeList
      let optionMap = {}
      attrs.map((attr) => {
        if (attr.options.length > 0) {
          attr.options.map((option) => {
            optionMap[option.id] = option.name
          })
        };
      })
      this.optionMap = optionMap
    },
    handleSku () {
      let skus = this.h2ProductSkuList
      if (skus.length > 0) {
        skus = skus.filter(sku => sku.status == 1)
      }
      skus.map((item) => {
        item.disabled = true
      })
      this.skus = skus

    },

    updateDisable (index) {
      this.renderTable = new Date().valueOf()
      this.$set(this.skus[index], 'disabled', false)
    },
    updataSkuCurrent (row, index) {
      //console.log(row)
      let params = {
        id: row.id,
        num: row.num,
        price: row.price,
        name: row.name,
        // image: row.image,
      }
      updateSkuUpd(params).then(() => {
        this.$set(this.skus[index], 'disabled', true)
        this.$message.success("修改成功！")
        this.renderTable = new Date().valueOf()
      })
    },
    uploadImage (e) {
      console.log(e)
      if (e.image) {
        let params = {
          id: e.id,
          image: e.image,
        }
        updateSkuUpd(params).then(() => {
          this.$message.success("修改成功！")
        })
      }

    },

  },

}


</script>

<style scoped lang="scss">
.attr-content {
  // padding: 5px;
  // border: 1px solid #eee;
}
</style>

<style>
.sku-attr .el-upload-list--picture-card .el-upload-list__item {
  width: 80px;
  height: 80px;
}

.sku-attr .el-upload--picture-card {
  width: 80px;
  height: 80px;
  line-height: 80px;
}

.good-view-video-list {
  background: rgb(245, 247, 250);
  padding: 0 10px;
  margin-top: -1px;
}

.input-btn-wrapper,
.attr-content {
  /* margin-bottom: 10px; */
}

.xiapli-list-good .is-disabled input,
.xiapli-list-good .is-disabled textarea {
  background-color: white !important;
  color: black !important;
}
.skuClass {
  border: 1px solid #eee;
  padding: 10px;
  margin: 10px 0;
}
.skuItem {
  margin: 5px 0;
}

.detailTable {
  margin-top: 10px;
  width: 1000px;
}
</style>
